<template>
    <el-menu default-active="media" @open="handleOpen" @close="handleClose" router style='height:100%'>
        <el-menu-item v-for="(item, index) in menuData" :key="item.index" :index="item.path">
            <el-icon>
                <component :is="item.icon" />
            </el-icon>
            <span> {{ item.menuName }} </span>
        </el-menu-item>
    </el-menu>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';

const colorArray = ['#67C23A', '#E6A23C', '#F56C6C', '#409EFF'];
const currentBgColor = ref(colorArray[0])

const menuData = ref([]);
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}

onMounted(() => {
    getMenu();//获取菜单
});

async function getMenu() {
    await axios.get("/menu.json")
        .then((response) => {
            menuData.value = response;
        })
        .catch(() => {
            console.log('error..........');
        });
}
</script>
  
<style scope lang="scss">
// .header {
//     @include bgColor();
//     --themeColor: v-bind(currentBgColor);
//     background: var(--themeColor);
// }
</style>
    
  
  
  
  